<template>
	<view class="container page">
		<view class="header flex mar-t-15 align-center">
			<view class>
				<text class="font-bold font-size-22">咨询师</text>
			</view>
			<view class="mar-l-12 area flex align-center text-center">
				<picker
					mode="multiSelector"
					@cancel="pickerCancel"
					@change="pickerComfirm"
					@columnchange="areaChange"
					:value="multiIndex"
					:range="cnarea"
				>
					<text class="font-size-13 font-color-666">{{area_text}}</text>
					<!-- {{  years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2]  }} -->
				</picker>
				<image src="@/static/icons/down.png" style="width:25px;height:25px" />
			</view>
		</view>
		<view class="filter flex text-center mar-t-15 flex-center font-size-13">
			<view class="flex-1 time" @click="filterTime(0)" :class="{'active':filter_time==0}">
				<text>全部</text>
			</view>
			<view class="flex-1">

			</view>
			<!-- <view class="flex-1">

			</view> -->
			<!-- <view class="flex-1 time" @click="filterTime(3)" :class="{'active':filter_time==3}">
				<text>近三日</text>
			</view>
			<view class="flex-1 time" @click="filterTime(7)" :class="{'active':filter_time==7}">
				<text>7日内</text>
			</view> -->
			<view class="flex-1 choose" @click="show = true">
				<text>筛选</text>
			</view>
		</view>
		<!-- 咨询师列表 -->
		<consult-list class="mar-t-20" :range="counsultors"></consult-list>
		<view>
			<filterConsultor :width="'70%'" :show.sync="show" :tags="tags" @confirm="filterConfirm($event)"></filterConsultor>
			<!--	:way.sync="way"
				:gender.sync="gender"
			:tag_index.sync="tag_index"-->
			<!-- <view class="mask" @click="hidden = true">
				
			</view>-->
		</view>
		<no-more v-if="index_page >= total_page"></no-more>
	</view>
</template>

<script>
import consultList from '@/components/consult-list'
import filterConsultor from '@/components/filter-consultor'
import { getConsultorTags, cnareaRoom, getConsultors } from '@/utils/http'
export default {
	components: {
		consultList,
		filterConsultor
	},
	data() {
		return {
			index_page: 0,
			total_page: 1,
			counsultors: [], //咨询师列表,
			show: false,
			cnarea_list_json: [],
			area_text: '地区',
			cnarea: [['选择地区'], ['选择工作室']],
			room_list: [],
			multiIndex: [0, 0],
			multiId: '',
			tags: [{ id: '', tag_name: '不限' }],
			tag: '',
			gender: '', //1=男 0=女 空表示不限
			way: '',
			filterParams: {}, //过滤参数,
			filter_time: 0 //时间过滤,0=全部 3= 3天内 7=7天内
		}
	},
	methods: {
		//咨询师类别标签获取
		getConsultorTags() {
			const _that = this
			getConsultorTags().then(res => {
				if (res) {
					_that.tags = [..._that.tags, ...res]
				}
			})
		},
		//获取咨询师
		getConsultorList(filterParams) {
			let params = { page: this.index_page + 1, room_id: this.multiId }

			this.filterParams = Object.assign(
				this.filterParams,
				params,
				filterParams
			)

			const _that = this
			getConsultors(this.filterParams).then(res => {
				if (res) {
					_that.counsultors = [..._that.counsultors, ...res.data]
					_that.index_page = res.current_page
					_that.total_page = res.last_page
				}
			})
		},
		//取消picker
		pickerCancel() {
			//this.multiIndex = [0, 0]
			// this.multiId = [0, 0]
		},
		//picker确认
		pickerComfirm(e) {
			this.multiIndex = e.detail.value
			const area_index = this.multiIndex[0]
			const room_index = this.multiIndex[1]
			let current_area = ''
			let current_room = ''
			let area_text = '地区'
			let multiId = 0
			if (area_index > 0) {
				current_area = this.cnarea_list_json[area_index - 1]
				multiId = current_area.id
				area_text = current_area.name
				if (room_index > 0) {
					current_room = current_area.list[room_index - 1]
					multiId = current_room.id
					area_text = current_room.name
				}
			}

			this.multiId = multiId
			this.area_text = area_text
			//清理数据
			this.clearsultors()
			this.getConsultorList()
		},
		areaChange(e) {
			//列
			let column = e.detail.column
			//行
			let row = e.detail.value

			console.log('当前选择列' + column + '当前选择行' + row)
			this.multiIndex[column] = row

			if (column == 0) {
				if (row == 0) {
					this.cnarea[1] = ['请选择站点']
				} else {
					this.cnarea[1] = this.room_list[row - 1]
				}
			}
		},
		getCnareaRooms() {
			const _that = this
			cnareaRoom().then(res => {
				// console.log(res)
				if (res) {
					_that.cnarea_list_json = res
					const element = ['请选择区域']
					for (let i = 0; i < res.length; i++) {
						element.push(res[i].name)
						let list = res[i].list
						let room_list = ['请选择站点']
						if (list) {
							for (let index = 0; index < list.length; index++) {
								room_list.push(list[index].name)
							}
						}
						_that.room_list.push(room_list)
						// _that.room_list_json.push(list)
					}
					// console.log(_that.room_list_json)
					// console.log(_that.room_list)
					_that.cnarea[0] = element
				}
			})
		},
		clearsultors() {
			this.counsultors = []
			this.index_page = 0
			this.total_page = 1
		},
		filterTime(i) {
			this.filter_time = i
			this.clearsultors()
			this.getConsultorList({ day_num: this.filter_time })
		},
		//筛选确认
		filterConfirm(e) {
			//console.log(e)
			// this.filterParams = e
			//this.filterParams = Object.assign(this.filterParams, e)
			// console.log(this.filterParams)

			// params = Object.assign(params, e)
			this.clearsultors()
			this.getConsultorList(e)
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.clearsultors()
		this.getConsultorList()
	},
	//上拉加载
	onReachBottom() {
		if (this.index_page < this.total_page) {
			this.getConsultorList()
		}
	},
	onLoad() {
		this.getConsultorTags()
		this.getCnareaRooms()
		this.getConsultorList()
	}
}
</script>

<style scoped>
.header .area {
	border-radius: 10px;
	padding: 1px 0px 1px 8px;
	border: 1px solid #cccccc;
}

.filter .active {
	background-color: #0088ff !important;
	border: none !important;
	color: #fff !important;
}
.filter .time {
	border-radius: 10px;
	border: 1rpx solid #cccccc;
	color: #666666;
	font-size: 0.72em;
	padding: 10px 0px;
	margin-right: 5px;
}
.filter .choose {
	padding: 3px 0px;
	color: #666666;
	font-size: 0.72em;
}
.hidden {
	display: none;
}
</style>